<template>
  <card>
    <b-row align-v="center" slot="header">
      <b-col cols="8">
        <h3 class="mb-0">账户管理</h3>
      </b-col>
      <b-col cols="4" class="text-right">
        <!-- 设置&保存 -->
        <button class="btn btn-sm btn-primary" @click="submitPassword()">
          设置&保存
        </button>
      </b-col>
    </b-row>

    <b-form>
      <!-- 修改密码 -->
      <h6 class="heading-small text-muted mb-4">修改密码</h6>

      <div class="pl-lg-4">
        <b-row>
          <b-col lg="6">
            <!-- 学号 -->
            <label class="form-control-label">学号</label>
            <el-input
              type="text"
              placeholder="学号"
              v-model="user.id"
              :disabled="true"
            >
            </el-input>
          </b-col>
        </b-row>
        <br />
        <b-row>
          <b-col lg="6">
            <label class="form-control-label">新密码</label>
            <el-input
              type="password"
              placeholder="新密码"
              autofocus="true"
              clearable
              v-model="user.password"
              @change="checkPwd"
            >
            </el-input>
            <div class="warning">{{ errorPwdText }}</div>
          </b-col>
        </b-row>
        <b-row>
          <b-col lg="6">
            <label class="form-control-label">确认密码</label>
            <el-input
              type="password"
              placeholder="确认密码"
              clearable
              v-model="user.rpassword"
              @change="checkRpwd"
            >
            </el-input>
            <div class="warning">{{ errorRpwdText }}</div>
          </b-col>
        </b-row>
      </div>
    </b-form>
  </card>
</template>
<script>
export default {
  data() {
    return {
      user: {
        id: "",
        password: "",
        rpassword: "",
      },
      errorPwdText: "",
      errorRpwdText: "",
    };
  },
  methods: {
    checkPwd() {
      let rule = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,.\/]).{8,20}$/;
      let text = "";
      if (!rule.test(this.user.password)) {
        text = "密码必须有8-20个字符，包括大小写字母、数字和符号";
      }
      this.errorPwdText = text;
    },
    checkRpwd() {
      let text = "";
      if (this.user.password != this.user.rpassword) {
        text = "两次输入的密码不一样";
      }
      this.errorRpwdText = text;
    },
    submitPassword() {
      if (!this.checkPwd && !this.checkRpwd) {
      }
    },
  },
};
</script>
<style>
.warning {
  margin-top: 3px;
  font-size: 12px;
  color: #fb6868;
  height: 25px;
}
</style>
